<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="vue1">
    <table v-if="show">
        <tr v-for="(user,index) in users" v-if="index%2==0" style="background-color:mediumvioletred;">
            <td v-text="index+1"></td>
            <td v-for="v in user" v-text="v"></td>
        </tr>
        <tr  v-else style="background-color:deepskyblue;">
            <td v-text="index+1"></td>
            <td v-for="v in user" v-text="v"></td>
        </tr>
    </table>

<!-- v-show -->
    <table v-show="show">
        <tr v-for="(user,index) in users" :key="index" v-if="index%2==0" style="background-color:deeppink;">
            <td v-text="index+1"></td>
            <td v-for="(v,k) in user" v-text="v"></td>
        </tr>
        <tr  v-else style="background-color:cornflowerblue;">
            <td v-text="index+1"></td>
            <td v-for="(v,k) in user" v-text="v"></td>
        </tr>
    </table>


    <button @click="showif" v-text="flag"></button>
</div>


<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#vue1",
        data:{
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'有哥', gender:'男', age: 30},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ],
            show:true,
            flag:"消失"
        },
        methods:{
            showif:function () {
                this.show = !this.show;
                if (this.show) {
                    this.flag="消失"
                }else {
                    this.flag="显示"
                }
            }
        }

    })
</script>

<script type="text/javascript">
    new Vue({
        el:"#vue2",
        data:{
            users: {name:'柳岩', gender:'女', age: 21}
        }
    })
</script>

</body>
</html>